<template>
  <view class="container">
    <uni-card is-full :is-shadow="false">
      <text class="uni-h6">弹出层组件用于弹出一个覆盖到页面上的内容，使用场景如：底部弹出分享弹窗、页面插屏广告等。</text>
    </uni-card>
    <uni-section title="基本示例" type="line">
      <view class="example-body box">
        <button class="button" type="primary" @click="toggle('center')"><text class="button-text">居中</text></button>
        <button class="button" type="primary" @click="toggleCalculator()"><text class="button-text">打开计算器</text></button>
      </view>
    </uni-section>
    <view>
      <!-- 普通弹窗 -->
      <uni-popup ref="popup" background-color="#fff" @change="change">
        <view class="popup-content" :class="{ 'popup-height': type.value === 'left' || type.value === 'right' }"><text
          class="text">popup 内容</text></view>
      </uni-popup>
      <!-- 计算器弹窗 -->
      <uni-popup ref="calculatorPopup" background-color="#fff" @change="calculatorChange">
        <view class="calculator-popup-content">
          <view class="calculator-display">{{ display }}</view>
          <view class="calculator-buttons">
            <button class="calculator-button" @click="appendNumber('1')">1</button>
            <button class="calculator-button" @click="appendNumber('2')">2</button>
            <button class="calculator-button" @click="appendNumber('3')">3</button>
            <button class="calculator-button" @click="appendOperator('+')">+</button>
            <button class="calculator-button" @click="appendNumber('4')">4</button>
            <button class="calculator-button" @click="appendNumber('5')">5</button>
            <button class="calculator-button" @click="appendNumber('6')">6</button>
            <button class="calculator-button" @click="appendOperator('-')">-</button>
            <button class="calculator-button" @click="appendNumber('7')">7</button>
            <button class="calculator-button" @click="appendNumber('8')">8</button>
            <button class="calculator-button" @click="appendNumber('9')">9</button>
            <button class="calculator-button" @click="appendOperator('*')">*</button>
            <button class="calculator-button" @click="appendNumber('0')">0</button>
            <button class="calculator-button" @click="calculate">=</button>
            <button class="calculator-button" @click="clearDisplay">C</button>
            <button class="calculator-button" @click="appendOperator('/')">/</button>
          </view>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const popup = ref(null);
const type = ref('');
const calculatorPopup = ref(null);
const display = ref('0');

const toggle = (toggleType) => {
  // open 方法传入参数 等同在 uni-popup 组件上绑定 type 属性
  popup.value.open(toggleType);
};

const toggleCalculator = () => {
  calculatorPopup.value.open();
};

const change = (e) => {
  console.log('当前模式：' + e.type + ',状态：' + e.show);
};

const calculatorChange = (e) => {
  console.log('计算器弹窗状态：' + e.show);
};

const appendNumber = (num) => {
  if (display.value === '0') {
    display.value = num;
  } else {
    display.value += num;
  }
};

const appendOperator = (operator) => {
  display.value += operator;
};

const clearDisplay = () => {
  display.value = '0';
};

const calculate = () => {
  try {
    display.value = eval(display.value).toString();
  } catch (error) {
    display.value = 'Error';
  }
};
</script>

<style scoped>
.calculator-popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
.calculator-display {
  width: 100%;
  height: 50px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 10px;
  font-size: 24px;
}
.calculator-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.calculator-button {
  height: 40px;
  font-size: 18px;
}
</style>